<template>
  <loading-pc-page
    v-show="['beforeInit', 'init', 'loading', 'opened', 'error', 'init', 'beforeStart'].includes(ttsa?.process)" />
  <!-- 中间页 -->
  <!-- <launch-pc-page v-if="['beforeStart'].includes(ttsa?.process)" /> -->
  <!-- 组件容器 -->
  <div class="components">
    <!-- 字幕 -->
    <web-subtitle />
    <!-- UI卡片 -->
    <ui-event-card />
    <!-- 底部控制bar -->
    <tab-bar :show="!clearScreen.footFlag && !ttsa.controller" @on-change-immerse-mode="showController" />
    <questions-list v-if="ttsa.controller && ttsa.mode === MODE.QA && !ttsa.voiceLoading && ttsa.questions.length" />
    <div v-if="ttsa.hasController">
      <!-- 侧边菜单 -->
      <web-menu v-show="clearScreen.menuFlag || ttsa.controller" />
      <!-- 左侧导航 -->
      <side-navigation-bar v-show="clearScreen.navFlag || ttsa.controller" />
    </div>
    <!-- 居中部分内容 -->
    <div class="main-content">
      <logo />
      <!-- 清晰度切换 -->
      <web-definition v-if="ttsa.hasController" />
    </div>
  </div>
</template>

<script lang="ts" setup name="MainPC">
import { useTtsaStore } from "@/store/ttsa";
import { MODE } from '@/constants/ttsa';
import { useConfigStore } from "@/store/config";

// hooks
const ttsa = useTtsaStore();

const config = useConfigStore()

const clearScreen = computed(() => config.clearScreen)

const showController = () => {
  if (!ttsa.hasController) return;
  ttsa.controller = !ttsa.controller;
};

</script>

<style lang="scss" scoped>
:global(body) {
  overflow: hidden;
}


.main-content {
  @apply absolute top-0 self-center;
  left: 50%;
  width: 1080px;
  margin-left: -540px;
}

.main-mask {
  position: absolute;
  z-index: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 320px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}
</style>
